<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
        <a-form-model-item label="选择角色" prop="selectRole">
              <j-select-role v-model="selectRole" @change="changeMe"/>
            </a-form-model-item>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">
  
  
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import {addRole,editRole,duplicateCheck } from '@/api/api'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'

  export default {
    name: "",
    mixins:[JeecgListMixin, mixinDevice],

    data () {
      return {
        selectRole:{},
        confirmLoading: false,
        description: '角色组管理页面',
        title:"",
        visible: false,
        roleDisabled: false,
        model: {},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'角色组编码',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'角色组名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'所属公司',
            align:"center",
            dataIndex: 'company'
          },
          // {
          //   title:'包含角色',
          //   align:"center",
          //   dataIndex: 'roles'
          // },
          {
            title:'更新时间',
            align:"center",
            dataIndex: 'updatetime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/demo/roleList/list",
          delete: "/role_list/roleList/delete",
          deleteBatch: "/role_list/roleList/deleteBatch",
          exportXlsUrl: "/role_list/roleList/exportXls",
          importExcelUrl: "role_list/roleList/importExcel",
          
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
     created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      changeMe(){

      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        //编辑页面禁止修改角色编码
        if(this.model.id){
          this.roleDisabled = true;
        }else{
          this.roleDisabled = false;
        }
      },
      close () {
        // this.$refs.form.clearValidate();
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$emit('close');
        this.visible = false;
        return
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if(!this.model.id){
              obj=addRole(this.model);
            }else{
              obj=editRole(this.model);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateRoleCode(rule, value, callback){
        if(/[\u4E00-\u9FA5]/g.test(value)){
          callback("角色编码不可输入汉字!");
        }else{
          let params = {
            tableName: "sys_role",
            fieldName: "role_code",
            fieldVal: value,
            dataId: this.model.id,
          };
          duplicateCheck(params).then((res)=>{
            if(res.success){
              callback();
            }else{
              callback(res.message);
            }
          });
        }
      }
    }
  }
</script>

<style scoped>

</style>